import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { Button, Table, Modal, Tooltip, notification } from 'antd';
import { DeleteOutlined, EditOutlined, VerticalAlignTopOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;

export default function NewsDraft(props) {
  // 设置Table表格组件需要的dataSource属性
  const [dataSource, setdataSource] = useState([])

  // 从本地存储中的token中将username解构出来
  const { username } = JSON.parse(localStorage.getItem("token"))

  // 获取列表数据
  useEffect(() => {
    // 请求数据接口
    axios.get(`/news?author=${username}&auditState=0&_expand=category`, {
    }).then((res) => {
      console.log(res.data)
      setdataSource(res.data)
    })
  }, [username])  // 当username值改变的时候，重新调用useEffect钩子函数

  // 设置表格Table组件的每一列的头部的具体信息
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <Tooltip title="预览内容">
          {/* 点击了标题后，利用a标签跳转路由，显示指定的路由组件 */}
          <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
        </Tooltip>
      }
    },
    {
      title: '作者',
      dataIndex: 'author',
    },
    {
      title: '新闻分类',
      dataIndex: 'category',
      render: (category) => {
        return category.title
      }
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          {/* 删除功能按钮 */}
          <Button 
            type="primary" 
            danger 
            ghost 
            shape="circle" 
            icon={<DeleteOutlined />} 
            onClick={() => { confirmMethod(item) }}
            style={{marginRight:"5px"}}
          ></Button>

          {/* 编辑功能按钮 */}
          <Button 
            shape="circle" 
            icon={<EditOutlined />} 
            onClick={() => {
              // 跳转路由，显示指定的路由组件
              props.history.push(`/news-manage/update/${item.id}`)
            }}
            style={{marginRight:"5px"}}
          ></Button>

          {/* 提交审核功能按钮 */}
          <Button 
            type="primary" 
            shape="circle" 
            icon={<VerticalAlignTopOutlined />} 
            // item.id 是当前这个Button组件所在的表格项元素的id属性
            onClick={() => { handleCheck(item.id) }}
          ></Button>
        </div>
      }
    },
  ]

  // 点击删除功能按钮Button组件的事件回调，弹出确认框
  const confirmMethod = (item) => {
    confirm({
      title: '你确定要删除?',
      icon: <ExclamationCircleOutlined />,
      cancelText: "取消",
      onOk() {
        deleteMethod(item)
      },
      onCancel() {

      },
    })
  }

  // 确认框中的ok按钮的点击事件回调
  const deleteMethod = (item) => {
    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`/news/${item.id}`)
  }

  // 提交审核功能按钮Button组件的点击事件回调
  const handleCheck = (id) => {
    axios.patch(`/news/${id}`, {
      // 将 auditState 的值修改为 1，使得当前这篇文章的状态变成 审核中
      auditState: 1
    }).then((res) => {
      // 跳转指定路由，显示指定的路由组件
      props.history.push("/audit-manage/list")

      // 提示框组件
      notification.info({
        message: "通知",
        description: "你可以在审核列表里面查看",
        placement: "top"
      });
    })
  }

  return (
    <>
      {/* 表格 */}
      <Table 
        dataSource={dataSource} 
        rowKey={(item) => item.id} 
        columns={columns} 
        pagination={{pageSize: 6}}
      />
    </>
  )
}
